<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>人人点评</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./css/element.css">

  <link href="./css/shop-list.css" rel="stylesheet">
  <link href="./css/main.css" rel="stylesheet">

  <style type="text/css">

  </style>
</head>

<body>
  <div id="app">
    <!-- 页面头部 -->
    <div class="header">
      <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
      <div class="header-title">{{typeName}}</div>
      <div class="header-search">
        <i class="el-icon-search"></i>
      </div>
    </div>

    <div class="sort-bar">
      <!-- 按距离排序 -->
      <div class="sort-item" @click="sortAndQuery('')">
        距离 <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
      <!-- 按类型分类 -->
      <div class="sort-item">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{typeName}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="t in types" :key="t.id" :command="t">
              {{t.name}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 按人气排序 -->
      <div class="sort-item" @click="sortAndQuery('comments')">
        人气 <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
      <!-- 按评分排序 -->
      <div class="sort-item" @click="sortAndQuery('score')">
        评分 <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
    </div>
    <!-- 商铺列表 -->
    <div class="shop-list" @scroll="onScroll">
      <div class="shop-box" v-for="s in shops" :key="s.id" @click="toDetail(s.id)">
        <div class="shop-img"><img :src="s.images" alt=""></div>
        <div class="shop-info">
          <div class="shop-title shop-item">{{s.name}}</div>
          <div class="shop-rate shop-item">
            <el-rate disabled v-model="s.score/10" text-color="#F63" show-score></el-rate>
            <span>{{s.comments}}条</span>
          </div>
          <div class="shop-area shop-item">
            <span>{{s.area}}</span>
            <span v-if="s.distance">{{s.distance < 1000 ? s.distance.toFixed(1) + 'm' : (s.distance/1000).toFixed(1)
                + 'km' }}</span>
          </div>
          <div class="shop-avg shop-item">￥{{s.avgPrice}}/人</div>
          <div class="shop-address shop-item">
            <i class="el-icon-map-location"></i>
            <span>{{s.address}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/vue.js"></script>
  <script src="./js/axios.min.js"></script>
  <!-- 引入组件库 -->
  <script src="./js/element.js"></script>
  <script src="./js/common.js"></script>
  <script>

    const app = new Vue({
      el: "#app",
      data: {
        util,
        isReachBottom: false,
        types: [], // 类型列表
        shops: [], // 商店列表
        typeName: "",
        params: {
          typeId: 0,
          current: 1,
          sortBy: "",
          x: 120.149993, // 经度
          y: 30.334229 // 纬度
        }
      },
      created() {
        // 获取参数
        this.params.x = JSON.parse(localStorage.getItem("currentAddress")).longitude
        this.params.y = JSON.parse(localStorage.getItem("currentAddress")).latitude
        this.params.typeId = util.getUrlParam("type");
        this.typeName = util.getUrlParam("name");
        // 查询商店
        this.queryShops();
        // 查询类型
        this.queryTypes();
      },
      mounted() {
        
      },
      methods: {
        queryTypes() {
          axios.get("/shop-type/list")
            .then(({ data }) => {
              this.types = data;
            })
            .catch(err => {
              console.log(err);
              this.$message.error(err)
            })
        },
        queryShops() {
          axios.get("/shop/of/type", {
            params: this.params
          })
            .then(({ data }) => {
              if (!data) {
                return
              }
              data.forEach(s => s.images = s.images.split(',')[0]);
              this.shops = this.shops.concat(data);
            })
            .catch(err => {
              console.log(err);
              this.$message.error(err)
            })
        },
        handleCommand(t) {
          location.href = "/shop-list.html?type=" + t.id + "&name=" + t.name;
        },
        sortAndQuery(sortBy) {
          if (sortBy === 'comments') {
            this.params.current = 1
            this.shops = [];
            this.params.sortBy = sortBy;
            this.queryShops();
          }else if(sortBy === 'score'){
            this.params.current = 1
            this.shops = [];
            this.params.sortBy = sortBy;
            this.queryShops();
          }else{
            this.params.current = 1
            // 默认是按照距离
            // 获取参数
            this.shops = [];
            this.params.sortBy = sortBy;
            this.queryShops();
          }
        },
        goBack() {
          history.back();
        },
        toDetail(id) {
          location.href = "/shop-detail.html?id=" + id
        },
        onScroll(e) {
          let scrollTop = e.target.scrollTop;
          let offsetHeight = e.target.offsetHeight;
          let scrollHeight = e.target.scrollHeight;
          if (scrollTop + offsetHeight + 1 > scrollHeight && !this.isReachBottom) {
            this.isReachBottom = true
            console.log("触底")
            this.params.current++
            this.queryShops(this.params.current, 5);
          } else {
            this.isReachBottom = false
          }
        },
      }
    })
  </script>
</body>

</html>